<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('projectIncome.projectControl.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.projectControl.systemType')}}</div>
              <dict-select v-model="listQuery.systemType" code="systemType"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.projectControl.projectNo')}}</div>
              <popover-select selectType="project" v-model="listQuery.projectNo" :placeholder="$t('projectIncome.projectControl.enterProjectNo')"></popover-select>
              <!--<el-select v-model="listQuery.projectNo" filterable remote reserve-keyword collapse-tags :placeholder="$t('projectIncome.projectControl.enterProjectNo')" :remote-method="getUserList" :loading="loading">-->
                <!--<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"></el-option>-->
              <!--</el-select>-->
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 23px">
            <el-button class="yt-btn-ys" type="primary" @click="handleFilter">{{$t('button.search')}}</el-button>
            <el-button class="yt-btn" type="primary" @click="reset">{{$t('button.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-content">
        <span>{{$t('projectIncome.projectControl.listTile')}}</span>
      </div>
      <div class="list-operation">
        <el-button class="yt-btn-ys" type="primary" @click="exportExcel">{{$t('button.export')}}</el-button>
      </div>
      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" :row-style="changeCss" id="print-content" 
      :default-sort = "{prop: 'vendorPoNo', order: 'ascending'}"
      v-loading="loading2" :element-loading-text="$t('projectIncome.projectControl.loading')" element-loading-spinner="el-icon-loading" max-height="600">
        <el-table-column align="center" label="Sum"  width="160" fixed>
          <el-table-column type="index" align="center" :label="$t('projectIncome.projectControl.serialNum')" width="60">
            <template slot-scope="scope">
              <div>{{ scope.row.serialNum }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorName')" prop="vendorName" min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>{{scope.row.vendorName?scope.row.vendorName:scope.row.total}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorOfferMoney">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorOfferMoney')" sortable prop="vendorOfferMoney" min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.vendorOfferMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorPoMoney">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorPoMoney')" sortable prop="vendorPoMoney" min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.vendorPoMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorPoNo')" sortable prop="vendorPoNo"  min-width="120" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorItem')" prop="vendorItem"  min-width="300" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.capitalProjectionDate')" sortable prop="capitalProjectionDate"  min-width="120" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.expectedPaymentMoney">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.expectedPaymentMoney')" sortable prop="expectedPaymentMoney"  min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.expectedPaymentMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorInvoiceDate')" sortable prop="vendorInvoiceDate"  min-width="100" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorInvoiceMoney">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorInvoiceMoney')" sortable prop="vendorInvoiceMoney"  min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.vendorInvoiceMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.vendorInvoiceNo')" sortable prop="vendorInvoiceNo"  min-width="100" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.paymentRemark')" prop="paymentRemark"  min-width="100" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.expectedPaymentDate')" sortable prop="expectedPaymentDate"  min-width="100" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.realityPaymentDate')" sortable prop="realityPaymentDate"  min-width="100" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.paymentMoney">
          <el-table-column align="center" :label="$t('projectIncome.projectControl.paymentMoney')" sortable prop="paymentMoney"  min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.paymentMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!--<div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>-->
    </div>
  </div>
</template>

<script>
  import dictSelect from '@/components/Dict/dictValueSelect';
  import { countForProject } from '@/api/pmoReport/projectIncome';
  import { queryProject } from '@/api/scheduleManager/worksDetails';
  import popoverSelect from '@/components/popover-select/index.vue';

  export default {
    name: 'projectControl',
    data() {
      return {
        subtotal: {},
        listQuery: {
          page: 1,
          limit: 10,
          systemType: '',
          projectNo: ''
        },
        options: [],
        loading: false,
        loading2: false,
        list: [],
        total: 0
      };
    },
    components: { dictSelect, popoverSelect },
    mounted() {
      this.getQuery()
      if (this.listQuery.systemType !== '' || this.listQuery.projectNo !== '') {
        this.getData()
      }
    },
    methods: {
      changeCss({ row }) {
        if (row.total) {
          if (row.total.indexOf('Subtotal') !== -1) {
            return 'background:#f0f2f5;color:#ff9900'
          }
        }
      },
      getQuery() {
        const projectControlListQuery = window.sessionStorage.getItem('projectControlListQuery');
        if (projectControlListQuery) {
          this.listQuery = JSON.parse(projectControlListQuery);
        }
      },
      handleFilter() {
        this.getData()
      },
      // 重置
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          systemType: '',
          projectNo: ''
        }
      },
      getUserList(query) {
        this.loading = true;
        queryProject({ projectNo: query }).then(res => {
          this.loading = false;
          this.options = res.data.rows.map(item => ({ value: item.id, label: item.projectNo }));
        });
      },
      exportExcel() {
        // 汇出
        const a = document.createElement('a');
        const href = '/api/admin/excel/exportProjectControlTable?systemType=' + this.listQuery.systemType + '&projectNo=' + this.listQuery.projectNo + '&userId=' + this.$store.getters.info.id;
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      getData() {
        this.loading2 = true
        countForProject(this.listQuery).then(res => {
          if (res.status === 201) {
            this.$message.error(res.message);
            this.loading2 = false
          } else {
            this.subtotal = res.data[0]
            Object.keys(this.subtotal).forEach(key => {
              this.subtotal[key] = String(this.subtotal[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
            })
            this.list = []
            for (const vo of res.data) {
              if (vo.serialNum) {
                this.list.push(vo)
              }
            }
            this.loading2 = false
          }
        })
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('projectControlListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped>
</style>
